<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:wicket="http://wicket.apache.org/">
<wicket:panel>
 
  <div wicket:id="examples" class="section">
  	<h2 id="behaviors">WiQuery behaviors</h2>
	<p>
		<strong>WiQuery</strong> aims to ease the writing of JavaScript with Wicket,
		e.g. use behaviors to attach jQuery statements to a component.
	</p>
	<div class="section">
		<h3>Example 1: change border style when a click happens</h3>
		<p>
			This first example describes how to generate a simple jQuery
			statement.
		</p>
		
		<div class="runit">
			<span wicket:id="example1">Example 1!</span>
		</div>
		
		<div class="source">
			<p class="htmlCode">
<code class="html">
&lt;span wicket:id="example1"&gt;Example 1!&lt;/span&gt;
</code>
			</p>
			<p class="javaCode">
<code class="java">
// consider being in a WebPage constructor 
public MyWebPage() {
    super();
    
	Label example1 = new Label("example1", "Example 1");
	example1.add(new WiQueryEventBehavior(new Event(MouseEvent.CLICK) {
	
		@Override
		public JsScope callback() {
			return new JsScope() {
			
				@Override
				protected void execute(JsScopeContext scopeContext) {
					scopeContext.self().chain(CssHelper.css("border", "1px solid red"));
				}
			
			};
		}
	
	}));
	this.add(example1);				
}
</code>
			</p>		
		</div>		
	</div>
  </div>
  
</wicket:panel>
</html>
  